<template>
	<div class="question">
		<div class="title">
			{{ nowQuestion.title }}
			<span class="tip">（{{ nowQuestion.questionType }}{{ score }}）</span>
		</div>

		<text-question v-model="answer" v-if="true" :readonly="readonly" @on-change="onChange"></text-question>
		<image-question v-model="answer" v-else :readonly="readonly"></image-question>
	</div>
</template>

<script>
import mixins from "@/mixins"
import textQuestion from "./text-question.vue"
import imageQuestion from "./image-question.vue"

export default {
	name: "test-question",
	mixins: [mixins],
	model: {
		prop: "value",
		event: "update:value",
	},
	props: {
		value: {
			type: Array,
			default: () => [],
		},
		readonly: {
			type: Boolean,
			default: false,
		},
		noScore: {
			type: Boolean,
			default: false,
		},
	},
	data() {
		return {}
	},
	computed: {
		answer: {
			get() {
				return this.value
			},
			set(val) {
				this.$emit("update:value", val)
			},
		},

		questionType() {
			return this.nowQuestion.questionType
		},
		nowQuestion() {
			return this.$store.getters["exam/nowQuestion"]
		},
		message() {
			return this.$store.state.exam.message
		},
		score() {
			if (this.noScore) return ""
			return " " + this.nowQuestion.score + "分"
		},
	},
	methods: {
		onChange(val) {
			this.$emit("on-change", val)
		},
	},
	components: {
		textQuestion,
		imageQuestion,
	},
}
</script>

<style lang="scss" scoped>
.question {
	.title {
		font-size: 31rpx;
		padding-bottom: 50rpx;
		.tip {
			color: #9d9d9d;
		}
	}
}
</style>
